<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>荣耀CG动画 - 个人中心</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="css/profile.css">
  <script src="js/profile.js" defer></script>
</head>
<body>
  <!-- 顶部导航栏 -->
  <header class="header">
    <div class="header-container">
      <div class="logo">
        <a href="index.html">
          <img src="images/SLogo.png" alt="荣耀CG动画">
        </a>
      </div>
      <div class="search-box">
        <input type="text" placeholder="搜索...">
        <button class="search-btn">
          <i class="fa fa-search"></i>
        </button>
      </div>
      <div class="user-menu">
        <button class="login-btn">登录</button>
        <button class="register-btn">注册</button>
      </div>
    </div>
  </header>

  <!-- 底部导航栏 -->
  <nav class="bottom-nav">
    <a href="index.html" class="nav-item">
      <i class="fa fa-home"></i>
      <span>首页</span>
    </a>
    <a href="events.html" class="nav-item">
      <i class="fa fa-trophy"></i>
      <span>赛事</span>
    </a>
    <a href="cg.html" class="nav-item">
      <i class="fa fa-film"></i>
      <span>CG动画</span>
    </a>
    <a href="profile.html" class="nav-item active">
      <i class="fa fa-user"></i>
      <span>个人中心</span>
    </a>
  </nav>

  <!-- 主内容区 -->
  <main class="main-content">
    <!-- 用户信息 -->
    <section class="user-profile">
      <div class="profile-header">
        <div class="profile-avatar">
          <img src="images/tou.jpg" alt="用户头像">
        </div>
        <div class="profile-info">
          <h2 class="username">游客用户</h2>
          <p class="user-desc">欢迎来到个人中心，请登录以享受更多功能</p>
          <div class="profile-stats">
            <div class="stat-item">
              <span class="stat-value">0</span>
              <span class="stat-label">关注</span>
            </div>
            <div class="stat-item">
              <span class="stat-value">0</span>
              <span class="stat-label">粉丝</span>
            </div>
            <div class="stat-item">
              <span class="stat-value">0</span>
              <span class="stat-label">收藏</span>
            </div>
          </div>
        </div>
        <button class="login-btn profile-login">登录</button>
      </div>
    </section>

    <!-- 功能菜单 -->
    <section class="profile-menu">
      <div class="menu-container">
        <a href="#" class="menu-item" data-menu="favorites">
          <i class="fa fa-bookmark"></i>
          <span>我的收藏</span>
        </a>
        <a href="#" class="menu-item" data-menu="history">
          <i class="fa fa-history"></i>
          <span>观看历史</span>
        </a>
        <a href="#" class="menu-item" data-menu="notifications">
          <i class="fa fa-bell"></i>
          <span>消息通知</span>
          <span class="badge">3</span>
        </a>
        <a href="#" class="menu-item" data-menu="settings">
          <i class="fa fa-cog"></i>
          <span>设置</span>
        </a>
      </div>
    </section>

    <!-- 我的收藏 -->
    <section class="my-collections">
      <h2 class="section-title">我的收藏</h2>
      <div class="empty-state">
        <i class="fa fa-bookmark-o"></i>
        <p>您还没有收藏任何CG动画</p>
        <p>登录后可以收藏喜欢的内容</p>
        <button class="login-btn collection-login">立即登录</button>
      </div>
    </section>

    <!-- 观看历史 -->
    <section class="watch-history">
      <h2 class="section-title">观看历史</h2>
      <div class="empty-state">
        <i class="fa fa-history"></i>
        <p>您还没有观看记录</p>
        <p>登录后可以保存观看历史</p>
        <button class="login-btn history-login">立即登录</button>
      </div>
    </section>

    <!-- 推荐内容 -->
    <section class="recommended-content">
      <h2 class="section-title">为您推荐</h2>
      <div class="recommend-container">
        <div class="recommend-item">
          <div class="video-thumb">
            <img src="images/cg1.png" alt="王者荣耀 - 新英雄">
            <div class="play-overlay">
              <i class="fa fa-play-circle"></i>
            </div>
            <span class="duration">02:38</span>
          </div>
          <h3>王者荣耀 - 新英雄预告</h3>
          <p>下一位英雄即将登场</p>
        </div>
        <div class="recommend-item">
          <div class="video-thumb">
            <img src="images/cg8.png" alt="和平精英 - 新武器">
            <div class="play-overlay">
              <i class="fa fa-play-circle"></i>
            </div>
            <span class="duration">01:56</span>
          </div>
          <h3>和平精英 - 新武器展示</h3>
          <p>全新武器性能测试</p>
        </div>
        <div class="recommend-item">
          <div class="video-thumb">
            <img src="images/cg3.png" alt="金铲铲之战 - 阵容">
            <div class="play-overlay">
              <i class="fa fa-play-circle"></i>
            </div>
            <span class="duration">03:12</span>
          </div>
          <h3>金铲铲之战 - 最强阵容</h3>
          <p>赛季末冲分必备</p>
        </div>
      </div>
    </section>
  </main>

  <!-- 侧边菜单容器 -->
  <div class="sidebar-menu">
    <div class="sidebar-header">
      <h2 id="menu-title">我的收藏</h2>
      <button class="close-sidebar">&times;</button>
    </div>
    <div class="sidebar-content" id="sidebar-content">
      <!-- 菜单内容将通过JavaScript动态生成 -->
    </div>
  </div>

  <!-- 遮罩层 -->
  <div class="sidebar-overlay"></div>

  <!-- 登录模态框 -->
  <div class="modal login-modal">
    <div class="modal-content">
      <div class="modal-header">
        <h2>登录账号</h2>
        <button class="close-modal">&times;</button>
      </div>
      <div class="modal-body">
        <form id="login-form">
          <div class="form-group">
            <label for="login-username">用户名</label>
            <input type="text" id="login-username" placeholder="请输入用户名">
          </div>
          <div class="form-group">
            <label for="login-password">密码</label>
            <input type="password" id="login-password" placeholder="请输入密码">
          </div>
          <button type="submit" class="login-submit">登录</button>
        </form>
        <div class="social-login">
          <p>或使用以下方式登录</p>
          <button class="other-login-btn">
            <i class="fa fa-ellipsis-h"></i>
            <span>其他方式登录</span>
          </button>
        </div>
        <div class="register-link">
          <p>还没有账号？<a href="#" class="show-register">立即注册</a></p>
        </div>
      </div>
    </div>
  </div>

  <!-- 注册模态框 -->
  <div class="modal register-modal">
    <div class="modal-content">
      <div class="modal-header">
        <h2>注册账号</h2>
        <button class="close-modal">&times;</button>
      </div>
      <div class="modal-body">
        <form id="register-form">
          <div class="form-group">
            <label for="register-username">用户名</label>
            <input type="text" id="register-username" placeholder="请输入用户名">
          </div>
          <div class="form-group">
            <label for="register-email">邮箱</label>
            <input type="email" id="register-email" placeholder="请输入邮箱">
          </div>
          <div class="form-group">
            <label for="register-password">密码</label>
            <input type="password" id="register-password" placeholder="请输入密码">
          </div>
          <div class="form-group">
            <label for="register-confirm">确认密码</label>
            <input type="password" id="register-confirm" placeholder="请再次输入密码">
          </div>
          <button type="submit" class="register-submit">注册</button>
        </form>
        <div class="login-link">
          <p>已有账号？<a href="#" class="show-login">立即登录</a></p>
        </div>
      </div>
    </div>
  </div>

  <!-- 视频播放模态框 -->
  <div class="modal video-modal">
    <div class="modal-content video-content">
      <div class="modal-header">
        <h2 id="video-title">视频播放</h2>
        <button class="close-modal">&times;</button>
      </div>
      <div class="modal-body">
        <video id="video-player" controls>
          <source src="" type="video/mp4">
          您的浏览器不支持HTML5视频播放。
        </video>
      </div>
    </div>
  </div>

  <!-- 社交登录悬浮框 -->
  <div class="social-login-popup">
    <div class="popup-header">
      <h3>选择登录方式</h3>
      <button class="close-popup">&times;</button>
    </div>
    <div class="platform-tabs">
      <div class="tab active" data-tab="qq">
        <i class="fa fa-qq"></i>
        <span>QQ登录</span>
      </div>
      <div class="tab" data-tab="wechat">
        <i class="fa fa-weixin"></i>
        <span>微信登录</span>
      </div>
      <div class="tab" data-tab="weibo">
        <i class="fa fa-weibo"></i>
        <span>微博登录</span>
      </div>
    </div>
    <div class="tab-content">
      <!-- QQ登录内容 -->
      <div class="tab-pane active" id="qq-tab">
        <div class="login-methods">
          <div class="login-method qr-code">
            <div class="qr-code-container">
              <img src="images/qq.jpg" alt="QQ扫码登录">
            </div>
            <p>扫码登录</p>
          </div>
          <div class="login-method account">
            <div class="form-group">
              <input type="text" placeholder="QQ号">
            </div>
            <div class="form-group">
              <input type="password" placeholder="密码">
            </div>
            <button class="account-login">账号登录</button>
          </div>
        </div>
      </div>
      
      <!-- 微信登录内容 -->
      <div class="tab-pane" id="wechat-tab">
        <div class="login-methods">
          <div class="login-method qr-code">
            <div class="qr-code-container">
              <img src="images/weichat.jpg" alt="微信扫码登录">
            </div>
            <p>扫码登录</p>
          </div>
          <div class="login-method account">
            <div class="form-group">
              <input type="text" placeholder="微信号/手机号/QQ号">
            </div>
            <div class="form-group">
              <input type="password" placeholder="密码">
            </div>
            <button class="account-login">账号登录</button>
          </div>
        </div>
      </div>
      
      <!-- 微博登录内容 -->
      <div class="tab-pane" id="weibo-tab">
        <div class="login-methods">
          <div class="login-method qr-code">
            <div class="qr-code-container">
              <img src="images/weibo.png" alt="微博扫码登录">
            </div>
            <p>扫码登录</p>
          </div>
          <div class="login-method account">
            <div class="form-group">
              <input type="text" placeholder="手机号/邮箱">
            </div>
            <div class="form-group">
              <input type="password" placeholder="密码">
            </div>
            <button class="account-login">账号登录</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>